<template>
  <div class="list-item">
    <div class="item-msg">
      <h2 class="course-name">{{listItem.course.name}}</h2>
      <p class="time-begin" v-if="courseType==1">
        校区：<span class="time">{{getCampusName(campusList,listItem.campusId)}}</span>
      </p>
      <p class="time-begin" v-if="courseType==2 && listItem.classPlanType == '0'">
        发布人：<span class="time">{{listItem.employeeName}}</span>
      </p>
      <p class="time-begin">
        <span v-if="listItem.classPlanType == '0'">开班时间：<span class="time begin">{{formatTime(listItem.selTimeBegin)}}</span></span>
        <span v-if="listItem.classPlanType == '1'">上课时间：<span class="time begin">{{formatTime(listItem.selTimeBegin, 1)}} ~ {{formatTime(listItem.selTimeEnd, 2)}}</span></span>
        <span v-if="listItem.classPlanType == '0'">预计结课时间：<span class="time">{{formatTime(listItem.selTimeEnd)}}</span></span>
        <span v-if="listItem.classPlanType == '1'">活动创建人：<span class="time begin">{{listItem.employeeName}}</span></span>
      </p>
      <p class="time-end">
        报名截止时间：<span class="time">{{formatTime(listItem.cutOffTime)}}</span>
      </p>
      <p class="time-end" v-if="listItem.classPlanType == '1' && listItem.qq" style="margin-bottom:0">
        活动群号(QQ群):<span class="time">{{listItem.qq}}</span>
      </p>
    </div>
    <div class="btn-msg" v-if="isLogin">
      <p v-if='listItem.courseStatus === "1"' class="btn-title">您已报名，但是还未选择空余时间！</p>
      <span class="btn" :class="{ 'opacity' : listItem.courseStatus === '2' || listItem.courseStatus === '6'}" @click="planDetail">{{btnText}}</span>
    </div>
    <div class="btn-msg" v-if="!isLogin">
      <span class="btn" @click="noLoginApply">我要报名</span>
    </div>
  </div>
</template>

<script>
import { mapActions , mapGetters} from 'vuex'
import mixins from 'plus/mixin'
export default {
  name: 'webClassListItem',
  props: ['listItem','itemKey','courseType','campusList'],
  mixins: [mixins.mixinFormatTime],
  computed:{
    btnText(){
      let btnText = '';
      switch(this.listItem.courseStatus){
        case '0' : btnText='我要报名'
          break;
        case '1' : btnText='选择空余时间'
          break;
        case '2' : btnText='已报名'
          break;
        case '6' : btnText='已报名'
          break;
        case '7' : btnText='我要报名'
          break;
      }
      return btnText
    },
    ...mapGetters(['isLogin'])
  },
  created(){
    // console.log(this.listItem)
  },
  methods: {
    planDetail(){
      let listItem = this.listItem;
      if(listItem.packId){
        this.$alert('您还未购买课程，请购买后再进行报名。', '提示', {
        confirmButtonText: '0元购买',
        showClose: true,
        callback: action => {
          if (action == 'confirm') {
            setTimeout(() => {
              this.$router.push({
                path: '/courseDetail',
                query: {
                  detailId: listItem.packId,
                  from: '',
                  direc: '',
                  type: ''
                }
              })
            }, 400);
          }
        }
      });
        return
      }
      if(listItem.courseStatus == '0' || listItem.courseStatus =='7'){
         this.$emit('dialog',  this.itemKey)
      }else if(listItem.courseStatus == '1'){
        this.$router.push({
            path:'/slectData',
            query:{
              id:listItem.id,
              hcId:listItem.hcId,
              type: this.courseType
            }
          })
          this.setFreeTime(listItem)
      }
    },
    getCampusName(list,cid){
      var name = '';
      for (var i = 0; i < list.length; i++){
        if(list[i].id == cid){
          name = list[i].campusName
          break;
        }
      }
      return name
    },
    noLoginApply(id){
      this.$alert('登录后才可以报名哟!', '提示', {
        confirmButtonText: '立即登录',
        showClose: true,
        callback: action => {
          if (action == 'confirm') {
            setTimeout(() => {
              this.setDialogClose(true)
            }, 400);
          }
        }
      });
      // this.setDialogClose(true)
    },
    ...mapActions(['setFreeTime','setDialogClose'])
  }
}
</script>

<style lang="stylus" scoped>
@import "~style/base"

.list-item
  position relative
  width 100%
  min-height 148px
  padding 30px 60px
  background-color $color-person-bg
  margin-top 30px
  @extend .borderBox

  &:last-child
    margin-bottom 120px

  .course-name
    line-height $font-size-large-l
    font-size $font-size-large-l
    color $color-course-title
  
  .time-begin
    margin 20px 0

  .begin
    margin-right 30px
  
  .time-end,
  .time-begin
    font-size $font-size-medium
    color $color-text-mt
    margin-bottom 18px

  .time
    color $color-person-btn
    font-weight bold



  .btn-msg
    position absolute
    top 30px
    right 60px
    height 88px

    .btn-title
      color $color-pay-text
      font-size $font-size-medium-x
      text-align right

    .btn
      position absolute
      bottom 0
      right 0
      width 144px
      height 44px
      background-color $color-theme
      line-height 44px
      text-align center
      font-size $font-size-large
      color $color-background-det
      border-radius 2px
      cursor pointer

    .opacity
      opacity .5
    
  
</style>


